<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Document</title>
	<script src="../js/vue.js"></script>
</head>

<body>
	<!-- 
你可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。
它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。
它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。 
-->
	<div id="app">
		<!--在文本框上按回车可以查找-->
		<input type="text" v-model="keywords" @keyup.enter="onEnterKeyUp()" />
		<!--点击按钮可以查找-->
		<button @click="onSearch">搜索</button>
		<div>查找的关键字：{{keywords}}</div>
	</div>
	<script>
		var vm = new Vue({
			el: "#app",
			data: {
				keywords: "macbook i5",
			},
			methods: {
				onSearch() {
					console.log(`查找 ${this.keywords} 相关的内容...`);
				},
				onEnterKeyUp() {
					console.log(`触发了回车键...`);
					//调用对应的函数
					this.onSearch();
				},
			},
			//想变量keywords只要被更改，就重新执行一次搜索
			watch: {
				keywords() {
					console.log("自动调用一次watch中的keywords函数...");
					this.onSearch();
				},
			},
			//进入new Vue()中的一切data:{}, methods:{}, watch:{}都会被打散，最终都直接隶属于new VUe()对象，都是平级的，所以可以this.方式，互访。
		});
	</script>
</body>

</html>